<!-- 添加职级 -->
<template>
  <div class='add_rank'>
    <dt-modal-info ref='rankModal' title='添加职级' :label-width='100' okText='确定' :width='50'>
      <Row>
        <Col span="4" offset="1">
        <Input type="text" v-model="searchText" placeholder="请输入职级名称" clearable />
        </Col>
        <Col span="4" offset="1">
        <Button type="primary" @click="search">搜索</Button>
        </Col>
      </Row>
      <div class="add_rank_list" v-if="list.length>0">
        <Row v-for="(item,index) in list" :key='item.rankId' type="flex"
          justify="space-between" class="list_row">
          <Col span="8" offset="1">{{item.rankName}}</Col>
          <Col span="2"><Button type="text" @click="handelClick(item,index)"
            v-if="!item.checkFlag">选择</Button></Col>
        </Row>
      </div>
      <div v-else class="no_data">
        未搜索到职级数据
      </div>
      <page :pageData="pageData" @pageOnChangeFun="pageOnChangeFun"
        @pageOnPageSizeChangeFun="pageOnPageSizeChangeFun" :showElevator='false'
        :showTotal='false'></page>
    </dt-modal-info>
  </div>
</template>

<script>
  import jobApi from '@/biz/postManagement'
  export default {
    data() {
      return {
        list: [],
        searchText: '',
        pageData: {
          total: 0,
          current: 1,
          rows: 50,
          pageSizeOpts: [50, 40, 30, 20, 10],
        },
        chenckRankId: [],
        parentRowData: null
      }
    },
    computed: {},
    watch: {},
    methods: {
      getPageRank() {
        let params = {
          rankIds: this.chenckRankId,
          rankName: this.searchText,
          page: this.pageData.current,
          rows: this.pageData.rows,
        }
        jobApi.getPageRank(params).then((res) => {
          this.pageData.total = Number(res.total)
          this.list = res.list
        })
      },
      show(data, chenckRankId) {
        this.pageData.current = 1
        this.pageData.rows = 50
        this.searchText = ''
        this.$refs.rankModal.show()
        this.chenckRankId = chenckRankId
        this.parentRowData = data
        this.getPageRank()
      },
      //点击选择
      handelClick(item, index) {
        item.checkFlag = true
        this.$set(this.list, index, item)
        this.parentRowData.positionRankVOList.push({
          flag: '3',
          rankId: item.rankId,
          rankName: item.rankName,
        })
        this.chenckRankId.push(item.rankId)
        let parentData = {
          parentRowData: this.parentRowData
        }
        this.$emit('rankPageChange', parentData)
      },
      search() {
        this.pageData.current = 1
        this.pageData.rows = 50
        this.getPageRank()
      },
      // 分页 页码改变事件
      pageOnChangeFun(current) {
        this.getPageRank()
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.getPageRank()
      },
    },
  }
</script>
<style lang='scss' scoped>
  .add_rank_list {
    margin-top: 20px;
    max-height: 500px;
    overflow: auto;

    .list_row {
      line-height: 40px;
      border-bottom: 1px solid #ccc;
    }
  }

  .no_data {
    font-size: 20px;
    text-align: center;
  }
</style>